<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getPurchaseApply } from "@/api/purchaseManage/getPurchaseApply";
import { ElTable, type TableColumnCtx } from "element-plus";
import dialogForm from "./components/dialogForm.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "PurchaseApply"
});
//初始化申请单
const INITIAL_DATA = {
  name: "",
  status: "",
  description: "",
  type: "",
  mark: ""
};

interface PurchaseApply {
  id: string; //单据编号-后端自动生成-不显示
  name: string; //名称-显示
  specification: string; //规格型号
  brand: string; //品牌
  unit: string; //单位
  unit_price: number; //单价
  quantity: number; //数量
  total_price: number; //金额--单价✖️数量
  status: string; //状态0项目录入(已保存，尚未提交申请),1提交申请,2回退,3部门审核同意,4综办审核同意,5财务审核同意,6物资审核同意,7综合审核同意,8班子审核同意，9（领导）最后审核通过，11已采购，12已退货
  dept_id: string; //部门编码
  dept_name: string; //部门
  emp_id: string; //申请人编号
  apply_name: string; //申请人
  apply_date: string; //申请日期
  users_name: string; //使用人
  in_out: string; //到货出入库标志:0未到货,1已入库,2已出库
  memo: string; //备注
}

const purchaseApply = ref([]);
const pagination = ref({ current: 1, pageSize: 12, total: 0 });
const dataLoading = ref(true);

//api采购申请表getPurchaseApply
const getPurchaseApplyData = async () => {
  try {
    const { data } = await getPurchaseApply();
    purchaseApply.value = data.list;
    pagination.value = {
      ...pagination.value,
      total: data.list.length
    };
  } catch (e) {
    console.log(e);
  } finally {
    setTimeout(() => {
      dataLoading.value = false;
    }, 500);
  }
};

onMounted(() => {
  getPurchaseApplyData();
});

const formDialogVisible = ref(false);
const formData = ref({ ...INITIAL_DATA });

const tableRef = ref<InstanceType<typeof ElTable>>();

//清空条件筛选
const clearFilter = () => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-expect-error
  tableRef.value!.clearFilter();
};
//部门筛选
const filterDep = (value: string, row: PurchaseApply) => {
  return row.dept_name === value;
};
//状态筛选
const filterTag = (value: string, row: PurchaseApply) => {
  return row.status === value;
};
</script>

<template>
  <div class="root">
    <el-button
      class="applybutton"
      :icon="useRenderIcon(AddFill)"
      @click="formDialogVisible = true"
    >
      新建采购申请
    </el-button>
    <div class="apply_record">
      <el-button
        class="clearbutton"
        style="padding-right: 10px"
        @click="clearFilter"
        >重置筛选
      </el-button>
      <div class="table">
        <el-table
          ref="tableRef"
          row-key="date"
          :border="true"
          :data="purchaseApply"
          style="width: 100%"
        >
          <el-table-column
            prop="apply_date"
            label="申请日期"
            sortable
            width="180"
            column-key="date"
          />
          <el-table-column prop="name" label="名称" width="100" />
          <el-table-column prop="quantity" label="数量" width="60" />
          <el-table-column prop="unit" label="单位" width="60" />
          <el-table-column prop="unit_price" label="单价" width="100" />
          <el-table-column prop="total_price" label="金额" width="100" />
          <el-table-column
            prop="dept_name"
            label="部门"
            width="180"
            :filters="[
              { text: '研发', value: 'yf' },
              { text: '研发五', value: 'yf5s' },
              { text: '维护', value: 'wh' }
            ]"
            :filter-method="filterDep"
          />
          <el-table-column prop="users_name" label="使用人" width="180" />
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            :filters="[
              { text: '项目录入(已保存，尚未提交申请)', value: '0' },
              { text: '提交申请', value: '1' },
              { text: '回退', value: '2' },
              { text: '部门审核同意', value: '3' },
              { text: '综办审核同意', value: '4' },
              { text: '财务审核同意', value: '5' },
              { text: '物资审核同意', value: '6' },
              { text: '综合审核同意,', value: '7' },
              { text: '班子审核同意', value: '8' },
              { text: '（领导）最后审核通过', value: '9' },
              { text: '已采购', value: '11' },
              { text: '已退货', value: '12' }
            ]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template #default="scope">
              <el-tag
                :type="scope.row.status === 'Home' ? '' : 'success'"
                disable-transitions
                >{{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="in_out" label="到货出入库标志" />
          <el-table-column prop="memo" label="备注" />
        </el-table>
      </div>
    </div>
    <dialogForm v-model:visible="formDialogVisible" :data="formData" />
  </div>
</template>

<style scoped>
.applybutton {
  float: left;
}
.clearbutton {
  float: right;
}
</style>
